<template>
  <div id='User'>
    <div class="user-card">
      <van-cell class="user-info">
        <template #icon>
          <div class="userFace">
            <img :src="userProfile.photo">
          </div>
        </template>
        <template #title>
          <div class="userName">{{ userProfile.name || 'user' }}</div>
        </template>
        <template #label>
          <van-tag color="#fff" text-color="#007bff">{{ userProfile.intro || '申请认证' }}</van-tag>
        </template>
      </van-cell>
      <div class="user-data">
        <div class="user-data-item">
          <span>{{ userProfile.art_count || 0 }}</span>
          <span>动态</span>
        </div>
        <div class="user-data-item">
          <span>{{ userProfile.follow_count || 0 }}</span>
          <span>关注</span>
        </div>
        <div class="user-data-item">
          <span>{{ userProfile.fans_count || 0 }}</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>
    <div class="more-opt">
      <van-cell-group>
        <van-cell title="编辑资料" icon="edit" is-link to="/user/edit" />
        <van-cell title="小思同学" icon="chat-o" is-link to="/user/chat" />
        <van-cell title="退出登录" icon="info-o" is-link @click="handleLogOut" />
      </van-cell-group>
    </div>
    <!-- <router-view class="user-child" @get-user-info="getUserInfoFun" /> -->
     <router-view v-slot="{ Component }" class="user-child" @get-user-info="getUserInfoFun" >
      <keep-alive v-if="$route.meta.keepAlive" >
        <component :is="Component"  />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
</template>

<script  setup>
import { cell as vanCell, Tag as vanTag, CellGroup as vanCellGroup, Dialog } from 'vant'
import { getUserInfo, getUserProfile } from '@/api'
import storage from '@/utils/storage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const userInfo = ref({})
const userProfile = ref({})
const getUserInfoFun = async () => {
  try {
    const { data: { data: info } } = await getUserInfo()
    const { data: { data: profile } } = await getUserProfile()
    userInfo.value = info
    userProfile.value = profile
  } catch {
    console.log('获取用户信息失败')
  }
}
getUserInfoFun()
const handleLogOut = () => {
  Dialog.confirm({
    title: '提示',
    message:
      '确认退出登录吗？'
  })
    .then(() => {
      storage.removeItem('token')
      storage.removeItem('refresh_token')
      router.push('/login')
    })
    .catch(() => {
      // on cancel
    })
}
</script>

<style lang='less'>
#User {

  .user-card {
    padding: 15px 5px;
    background-color: #007bff;

    .user-info {
      background-color: transparent;

      &::after {
        display: none !important;
      }

      .userFace {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        background-color: #fff;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .userName {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
        max-width: 200px;
        // 溢出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .user-data {
      display: flex;
      justify-content: space-between;
      padding: 15px 30px;

      .user-data-item {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        line-height: 1.5;
      }
    }
  }

  .user-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    background-color: #fff;
    z-index: 1000;
  }
}
</style>
